<!--
 * @Description: 主页tab
 * @Author: charles
 * @Date: 2021-12-14 20:42:55
 * @LastEditors: charles
 * @LastEditTime: 2021-12-14 21:28:58
-->
<template>
  <div class="home">
    <!--首页导航-->
    <van-nav-bar title="首页" />
    <!--工单类型栏目-->
    {{active }}
    <van-tabs v-model="active"  @click="tabClickHandler">
      <van-tab 
      :title="item"
       v-for="(item, index) in orderType" 
      :key="index"></van-tab>
     <!--工单列表-->
     <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
      <div 
       class="orderBox" 
       v-for="(item, index) in orderList" 
       :key="index"
       @click="toWorkerOrderDetails(item)">
        <div class="left">
         <img src="@/assets/work.png" 
         alt="图片丢失" width="50px" 
         height="50">
        </div>
        <div class="right">
          <div>工单状态：{{ item.status }}</div>
          <div>工单类型：{{ item.type }}</div>
          <div>创建时间：{{ item.create_time |datefmt }}</div>
        </div>
        </div>
      </van-list>
    </van-tabs>
  
  </div>
</template>
<script>
import { get } from '@/http/axios';
export default {
     data(){
       return{
         loading:false,
         finished:true,
         active: "",
         orderType:["全部","安装","维修","拆机"],
         params:{
           page:1,
           pageSize:10,
           type : null,
         },
         orderList:[]
       };
     },
     methods:{
       onLoad(){},
       tabClickHandler(name, title){
         if(title != '全部'){
            this.params.type = title
         }
         //重载数据
         this.pageQueryWorkerOrders();
       },
       //分页查询工单信息
       pageQueryWorkerOrders(){
         this.loading=true;  
          get('/workorder/pageQuery',this.params).then((res) =>{
            this.orderList = res.data.list
          });
       },
     //跳转至工单详情页
     toWorkerOrderDetails(workOrder){
       this.$router.push({
       path: '/orderDetail',
       query: workOrder,
       })
       
     }
     },
  created(){
    //调用分页查询工单的方法
    this.pageQueryWorkerOrders();
  }
};
</script>
<style scoped>
.home {
  padding-bottom: 50px;
}
.orderBox{
  border: 1px solid #999;
  margin: 10px;
  padding: 10dx;
  height: 100dx;
  display: flex;
  cursor: pointer;
}
</style>